<template>
    <div>
        <div class="checkbox" id="checkbox">
            <div class="content">
                <template v-if="allData != null && allData.length>0">
                  <div class="item" v-for="(first,firIndex) in allData" :key="firIndex">
                    <div class="first">
                        <el-checkbox  :disabled="!isEdit"
                                      :indeterminate="first.isIndeterminate"
                                     v-model="first.mychecked"
                                     @change="firstCheck(firIndex)"
                                     :label="first.name">
                          <span class="firstCheck"> {{first.name}}</span>
                        </el-checkbox>
                    </div>
                    <div class="twoCheck">
                      <div class="second" v-for="(second,secIndex) in first.children" :key="secIndex">

                          <el-checkbox  :disabled="!isEdit" v-model="second.mychecked"
                                       @change="secondCheck(firIndex)"
                                       :label="second.name">
                            {{second.name}}
                          </el-checkbox>
                      </div>
                    </div>
                  </div>
                </template>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                allData: [],
                checkedName: [],
                checkPath: [],
            };
        },
        props: {
            role: Array,
            editForm: Object,
            isEdit: Boolean,
        },
        methods: {
            firstCheck(index) {
                if (this.allData[index].mychecked == false) {
                    this.allData[index].isIndeterminate = false;
                    let childrenArray = this.allData[index].children;
                    if (childrenArray) {
                        let len = childrenArray.length;
                        for (let i = 0; i < len; i++) {
                            childrenArray[i].mychecked = false;
                        }
                    }
                } else if (this.allData[index].mychecked == true) {
                    this.allData[index].isIndeterminate = false;
                    let childrenArray = this.allData[index].children;
                    if (childrenArray) {
                        let len = childrenArray.length;
                        for (let i = 0; i < len; i++) {
                            childrenArray[i].mychecked = true;
                        }
                    }
                }
              this.handleCheckedSure()
            },
            secondCheck(index) {
                let childrenArray = this.allData[index].children;
                let tickCount = 0; //选中个数
                let len = childrenArray.length;
                for (var i = 0; i < len; i++) {
                    if (childrenArray[i].mychecked === true) {
                        tickCount++;
                    }
                }

                if (tickCount == len) { //二级全勾选  一级勾选
                    this.allData[index].mychecked = true;
                    this.allData[index].isIndeterminate = false;
                } else if (tickCount == 0) { //二级全不勾选
                    this.allData[index].isIndeterminate = false;
                } else { //二级未全选  一级不勾选
                    this.allData[index].mychecked = false;
                    this.allData[index].isIndeterminate = true;
                }
              this.handleCheckedSure();
            },
            handleCheckedSure() {
                let temp = this.deepClone(this.editForm)
                this.checkedName = [];
                this.checkPath=[];
                for (let i = 0; i < this.allData.length; i++) {
                    let childrenArray = this.allData[i].children;
                    let len = childrenArray.length;
                    for (let j = 0; j < len; j++) {
                        if (childrenArray[j].mychecked == true) {
                            this.checkPath.push(childrenArray[j].path)
                            this.checkedName.push(childrenArray[j].name);
                            temp.role = this.checkPath
                        }
                    }
                }
                this.$emit('getPath', temp);
            },
            deepClone(target) {
                let result;
                if (typeof target === 'object') {
                    if (Array.isArray(target)) {
                        result = []; // 将result赋值为一个数组，并且执行遍历
                        for (let i in target) {
                            // 递归克隆数组中的每一项
                            result.push(this.deepClone(target[i]))
                        }
                        // 判断如果当前的值是null的话；直接赋值为null
                    } else if (target === null) {
                        result = null;
                        // 判断如果当前的值是一个RegExp对象的话，直接赋值
                    } else if (target.constructor === RegExp) {
                        result = target;
                    } else {
                        // 否则是普通对象，直接for in循环，递归赋值对象的所有值
                        result = {};
                        for (let i in target) {
                            result[i] = this.deepClone(target[i]);
                        }
                    }
                    // 如果不是对象的话，就是基本数据类型，那么直接赋值
                } else {
                    result = target;
                }
                return result;
            },
            updateRole() {
                let temp = this.deepClone(this.role);
                for (let i = 0; i < temp.length; i++) {
                    temp[i]['isIndeterminate'] = false;
                    for (let j = 0; j < temp[i].children.length; j++) {
                        if (this.editForm.role.indexOf(temp[i].children[j].path) > -1) {
                            temp[i].children[j]['mychecked'] = true;//二级是否选中
                        } else {
                            temp[i].children[j]['mychecked'] = false
                        }
                    }
                }
                for (let i = 0; i < temp.length; i++) {
                    let count = 0;
                    for (let j = 0; j < temp[i].children.length; j++) {
                        if (temp[i].children[j]['mychecked'] === true) {
                            count++
                        }
                    }

                    if (temp[i].children.length === count) {
                        temp[i].mychecked = true;
                        temp[i].isIndeterminate = false;
                    } else if (count > 0) {
                        temp[i].mychecked = false;
                        temp[i].isIndeterminate = true;
                    } else {

                        temp[i].mychecked = false;
                        temp[i].isIndeterminate = false;
                    }
                }
                this.allData = temp;
            }

        }, beforeCreate() {
            let Arr = [
                {
                    name: '超级管理员',
                    auth: '所有权限',
                    description: '拥有所有权限',
                    date: new Date().toLocaleString(),
                    remarks: '',
                    role: ['1'],
                },
                {
                    name: '超级管理员',
                    auth: '所有权限',
                    description: '拥有所有权限',
                    date: new Date().toLocaleString(),
                    remarks: '',
                    role: ['1'],
                },
                {
                    name: '超级管理员',
                    auth: '所有权限',
                    description: '拥有所有权限',
                    date: new Date().toLocaleString(),
                    remarks: '',
                    role: ['1'],
                }
            ]
            let roleArr = JSON.parse(localStorage.getItem('roleArr')) || Arr
            localStorage.setItem('roleArr', JSON.stringify(roleArr))
        },
        beforeMount() {
            console.log('daikt', this.editForm)
            this.updateRole();
        },
        watch: {
            editForm() {
                this.updateRole();
            }
        }
    }
</script>
<style scoped lang="less">
    .second {
        display: inline-block;
        margin-right: 30px;
    }

    .firstCheck {
        font-size: 16px;
        font-weight: 600;
    }

    .twoCheck {
        margin: 0 20px 10px;
    }

    .checkbox {
        padding: 10px 30px;
    }
</style>